<template>
  <main-container>
    <el-card class="table-card" v-loading="result.loading">
      <template v-slot:header>
        <table-header :condition.sync="condition" @search="search"
                      :title="$t('sbom.project_list')"
                      @create="create" :createTip="$t('sbom.sbom_create')"
                      :show-create="true"
                      :items="items" :columnNames="columnNames" @delete="deleteBatch" :show-delete="true"
                      :checkedColumnNames="checkedColumnNames" :checkAll="checkAll" :isIndeterminate="isIndeterminate"
                      @handleCheckedColumnNamesChange="handleCheckedColumnNamesChange" @handleCheckAllChange="handleCheckAllChange"/>
      </template>

      <hide-table
        :table-data="tableData"
        @sort-change="sort"
        @filter-change="filter"
        @select-all="select"
        @select="select"
      >
        <el-table-column type="selection" id="selection" prop="selection" min-width="50">
        </el-table-column>
        <el-table-column type="index" min-width="40"/>
        <el-table-column prop="name" v-if="checkedColumnNames.includes('name')" :label="$t('sbom.name')" min-width="140" show-overflow-tooltip>
          <template v-slot:default="scope">
              <span>
                <i class="iconfont icon-SBOM sbom-icon"></i>
                <span slot="title">{{ scope.row.name }}</span>
              </span>
          </template>
        </el-table-column>
        <el-table-column prop="description" v-if="checkedColumnNames.includes('description')" :label="$t('sbom.desc')" min-width="200" show-overflow-tooltip>
          <template v-slot:default="scope">
              <span slot="title">{{ scope.row.description }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="150" v-if="checkedColumnNames.includes('createTime')" :label="$t('account.create_time')" sortable
                         prop="createTime">
          <template v-slot:default="scope">
            <span>{{ scope.row.createTime | timestampFormatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="150" v-if="checkedColumnNames.includes('updateTime')" :label="$t('account.update_time')" sortable
                         prop="updateTime">
          <template v-slot:default="scope">
            <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" v-if="checkedColumnNames.includes('userName')" :label="$t('account.creator')" min-width="80" show-overflow-tooltip/>
        <el-table-column min-width="150" :label="$t('commons.operating')" fixed="right">
          <template v-slot:default="scope">
            <table-operators :buttons="buttons" :row="scope.row"/>
          </template>
        </el-table-column>
      </hide-table>
      <table-pagination :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize" :total="total"/>
    </el-card>

    <!--Create sbom-->
    <el-drawer class="rtl" :title="$t('sbom.sbom_create')" :visible.sync="createVisible" size="60%" :before-close="handleClose" :direction="direction"
               :destroy-on-close="true" v-loading="viewResult.loading">
      <el-form :model="addForm" label-position="right" label-width="150px" size="small" ref="addForm" :rules="rule">
        <el-form-item :label="$t('sbom.name')" ref="name" prop="name">
          <el-input v-model="addForm.name" autocomplete="off" :placeholder="$t('sbom.name')"/>
        </el-form-item>
        <el-form-item :label="$t('sbom.desc')" ref="name" prop="description">
          <el-input v-model="addForm.description" autocomplete="off" :placeholder="$t('sbom.desc')"/>
        </el-form-item>
        <el-form-item>
          <span style="color: red">{{ $t('sbom.sbom_note') }}</span>
        </el-form-item>
      </el-form>
      <div style="margin: 10px;">
        <dialog-footer
          @cancel="createVisible = false"
          @confirm="save()"/>
      </div>
    </el-drawer>
    <!--Create sbom-->

    <!--Update sbom-->
    <el-drawer class="rtl" :title="$t('sbom.sbom_update')" :visible.sync="updateVisible" size="60%" :before-close="handleClose" :direction="direction"
               :destroy-on-close="true" v-loading="viewResult.loading">
      <el-form :model="form" label-position="right" label-width="150px" size="small" ref="form" :rules="rule">
        <el-form-item :label="$t('sbom.name')" ref="name" prop="name">
          <el-input v-model="form.name" autocomplete="off" :placeholder="$t('sbom.name')"/>
        </el-form-item>
        <el-form-item :label="$t('sbom.desc')" ref="name" prop="description">
          <el-input v-model="form.description" autocomplete="off" :placeholder="$t('sbom.desc')"/>
        </el-form-item>
        <el-form-item>
          <span style="color: red">{{ $t('sbom.sbom_note') }}</span>
        </el-form-item>
      </el-form>
      <div style="margin: 10px;">
        <dialog-footer
          @cancel="updateVisible = false"
          @confirm="edit()"/>
      </div>
    </el-drawer>
    <!--Update sbom-->

    <!--Sbom version-->
    <el-drawer class="rtl" :title="$t('sbom.project_version')" :visible.sync="versionVisible" size="90%" :before-close="handleClose" :direction="direction"
               :destroy-on-close="true" v-loading="viewResult.loading">
      <el-card class="table-card">
        <template v-slot:header>
          <version-table-header :title="$t('sbom.project_version_list')" @search="searchVersion"
                        @create="createVersion" :createTip="$t('sbom.version_create')" :show-create="true"/>
        </template>

        <el-table border :data="versionTableData" class="adjust-table table-content" @sort-change="sort"
                  @filter-change="filter">
          <el-table-column type="index" min-width="3%"/>
          <el-table-column prop="name" :label="$t('sbom.version_name')" min-width="15%" show-overflow-tooltip>
            <template v-slot:default="scope">
                <span>
                  <i class="iconfont icon-lianmenglian sbom-icon-2"></i>
                  <span slot="title">{{ scope.row.name }}</span>
                </span>
            </template>
          </el-table-column>
          <el-table-column prop="description" :label="$t('sbom.version_desc')" min-width="20%" show-overflow-tooltip>
            <template v-slot:default="scope">
              <span slot="title">{{ scope.row.description }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="15%" :label="$t('account.create_time')" sortable
                           prop="createTime">
            <template v-slot:default="scope">
              <span>{{ scope.row.createTime | timestampFormatDate }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="15%" :label="$t('account.update_time')" sortable
                           prop="updateTime">
            <template v-slot:default="scope">
              <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="20%" :label="$t('commons.operating')" fixed="right">
            <template v-slot:default="scope">
              <table-operators :buttons="versionButtons" :row="scope.row"/>
            </template>
          </el-table-column>
        </el-table>
        <table-pagination :change="searchVersion" :current-page.sync="versionPage" :page-size.sync="versionPageSize" :total="versionTotal"/>
      </el-card>
      <!--Add Sbom version-->
      <div>
        <el-drawer
          size="80%"
          :title="$t('sbom.version_create')"
          :append-to-body="true"
          :before-close="innerVersionClose"
          :visible.sync="innerAddVersion">
          <el-form :model="addVersionForm" label-position="right" label-width="150px" size="small" ref="addVersionForm" :rules="rule">
            <el-form-item :label="$t('sbom.version_name')" ref="name" prop="name">
              <el-input v-model="addVersionForm.name" autocomplete="off" :placeholder="$t('sbom.version_name')"/>
            </el-form-item>
            <el-form-item :label="$t('sbom.version_desc')" ref="name" prop="description">
              <el-input v-model="addVersionForm.description" autocomplete="off" :placeholder="$t('sbom.version_desc')"/>
            </el-form-item>
            <el-form-item>
              <span style="color: red">{{ $t('sbom.sbom_note2') }}</span>
            </el-form-item>
          </el-form>
          <dialog-footer
            @cancel="innerAddVersion = false"
            @confirm="saveVersion()"/>
        </el-drawer>
      </div>
      <!--Add Sbom version-->
      <!--Edit Sbom version-->
      <div>
        <el-drawer
          size="80%"
          :title="$t('sbom.version_update')"
          :append-to-body="true"
          :before-close="innerVersionClose"
          :visible.sync="innerEditVersion">
          <el-form :model="editVersionForm" label-position="right" label-width="150px" size="small" ref="editVersionForm" :rules="rule">
            <el-form-item :label="$t('sbom.version_name')" ref="name" prop="name">
              <el-input v-model="editVersionForm.name" autocomplete="off" :placeholder="$t('sbom.version_name')"/>
            </el-form-item>
            <el-form-item :label="$t('sbom.version_desc')" ref="name" prop="description">
              <el-input v-model="editVersionForm.description" autocomplete="off" :placeholder="$t('sbom.version_desc')"/>
            </el-form-item>
            <el-form-item>
              <span style="color: red">{{ $t('sbom.sbom_note2') }}</span>
            </el-form-item>
          </el-form>
          <dialog-footer
            @cancel="innerEditVersion = false"
            @confirm="editVersion()"/>
        </el-drawer>
      </div>
      <!--Edit Sbom version-->
      <!--Setting Sbom version-->
      <div>
        <el-drawer
          size="80%"
          :title="$t('sbom.sbom_version_setting')"
          :append-to-body="true"
          :before-close="innerVersionClose"
          :visible.sync="innerSettingVersion">
          <el-card class="table-card edit_dev" style="padding: 25px;margin: 25px;">
            <div style="text-align: center; margin: 25px;">
              <p style="text-align: center; padding: 10px;margin: 25px;color: red;background-color: aliceblue;">{{ $t('code.code_scan') }}</p>
              <el-transfer :titles="[$t('sbom.source_code'), $t('sbom.target_code')]" :filter-method="filterMethod" style="text-align: left; display: inline-block"
                           :filter-placeholder="$t('commons.search_by_name')" filterable v-model="codeValue" :data="codeData">
              </el-transfer>
            </div>
            <div style="text-align: center; margin: 25px;">
              <p style="text-align: center; padding: 10px;margin: 25px;color: #893fdc;background-color: aliceblue;">{{ $t('image.image_scan') }}</p>
              <el-transfer :titles="[$t('sbom.source_image'), $t('sbom.target_image')]" :filter-method="filterMethod" style="text-align: left; display: inline-block"
                           :filter-placeholder="$t('commons.search_by_name')" filterable v-model="imageValue" :data="imageData">
              </el-transfer>
            </div>
            <div style="text-align: center; margin: 25px;">
              <p style="text-align: center; padding: 10px;margin: 25px;color: #215d9a;background-color: aliceblue;">{{ $t('fs.file_system') }}</p>
              <el-transfer :titles="[$t('sbom.source_fs'), $t('sbom.target_fs')]" :filter-method="filterMethod" style="text-align: left; display: inline-block"
                           :filter-placeholder="$t('commons.search_by_name')" filterable v-model="fsValue" :data="fsData">
              </el-transfer>
            </div>
          </el-card>
          <dialog-footer
          @cancel="innerSettingVersion = false"
          @confirm="settingVersion()"/>
        </el-drawer>
      </div>
      <!--Setting Sbom version-->
    </el-drawer>
    <!--Sbom version-->

  </main-container>
</template>

<script>
import TablePagination from "@/business/components/common/pagination/TablePagination";
import TableHeader from "@/business/components/common/components/TableHeader";
import TableOperator from "@/business/components/common/components/TableOperator";
import Container from "@/business/components/common/components/Container";
import MainContainer from "@/business/components/common/components/MainContainer";
import TableOperators from "@/business/components/common/components/TableOperators";
import {_filter, _sort} from "@/common/js/utils";
import {SBOM_CONFIGS} from "@/business/components/common/components/search/search-components";
import DialogFooter from "@/business/components/common/components/DialogFooter";
import VersionTableHeader from "../head/VersionTableHeader";
import HideTable from "@/business/components/common/hideTable/HideTable";
import {
  addSbomUrl,
  addSbomVersionUrl,
  deleteProjectsUrl,
  deleteSbomUrl,
  deleteSbomVersionUrl,
  sbomListUrl,
  sbomScanUrl,
  sbomVersionListUrl,
  settingVersionUrl,
  updateSbomUrl,
  updateSbomVersionUrl
} from "@/api/k8s/sbom/sbom";
import {codeAllBindListUrl, codeUnBindListUrl} from "@/api/k8s/code/code";
import {fsAllBindListUrl, fsUnBindListUrl} from "@/api/k8s/fs/fs";
import {imageAllBindListUrl, imageUnBindListUrl} from "@/api/k8s/image/image";

//列表展示与隐藏
const columnOptions = [
  {
    label: 'sbom.name',
    props: 'name',
    disabled: false
  },
  {
    label: 'sbom.desc',
    props: 'description',
    disabled: false
  },
  {
    label: 'account.create_time',
    props: 'createTime',
    disabled: false
  },
  {
    label: 'account.update_time',
    props: 'updateTime',
    disabled: false
  },
  {
    label: 'account.creator',
    props: 'userName',
    disabled: false
  },
];

/* eslint-disable */
export default {
  components: {
    TableOperators,
    MainContainer,
    Container,
    TableHeader,
    TablePagination,
    TableOperator,
    DialogFooter,
    VersionTableHeader,
    HideTable,
  },
  data() {
    return {
      result: {},
      viewResult: {},
      condition: {
        components: SBOM_CONFIGS
      },
      selectIds: new Set(),
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      versionTableData: [],
      versionPage: 1,
      versionPageSize: 10,
      versionTotal: 0,
      loading: false,
      createVisible: false,
      updateVisible: false,
      versionVisible: false,
      innerAddVersion: false,
      innerEditVersion: false,
      innerSettingVersion: false,
      tmpList: [],
      item: {},
      form: {},
      addForm: {},
      addVersionForm: {},
      editVersionForm: {},
      script: '',
      direction: 'rtl',
      rule: {
        name: [
          {required: true, message: this.$t('commons.input_name'), trigger: 'blur'},
          {min: 2, max: 150, message: this.$t('commons.input_limit', [2, 150]), trigger: 'blur'},
          {
            required: true,
            message: this.$t("workspace.special_characters_are_not_supported"),
            trigger: 'blur'
          }
        ],
        description: [
          {required: true, message: this.$t('commons.input_name'), trigger: 'blur'},
          {min: 2, max: 100, message: this.$t('commons.input_limit', [2, 100]), trigger: 'blur'},
          {
            required: true,
            message: this.$t("workspace.special_characters_are_not_supported"),
            trigger: 'blur'
          }
        ],
      },
      buttons: [
        {
          tip: this.$t('sbom.project_version'), icon: "el-icon-s-grid", type: "success",
          exec: this.handleVersion
        }, {
          tip: this.$t('commons.edit'), icon: "el-icon-edit", type: "primary",
          exec: this.handleEdit
        }, {
          tip: this.$t('commons.delete'), icon: "el-icon-delete", type: "danger",
          exec: this.handleDelete
        }
      ],
      versionButtons: [
        {
          tip: this.$t('sbom.sbom_scan'), icon: "el-icon-s-promotion", type: "success",
          exec: this.handleScan
        }, {
          tip: this.$t('sbom.sbom_version_setting'), icon: "el-icon-s-flag", type: "warning",
          exec: this.handleSetting
        }, {
          tip: this.$t('sbom.version_update'), icon: "el-icon-edit", type: "primary",
          exec: this.handleVersionEdit
        }, {
          tip: this.$t('sbom.version_delete'), icon: "el-icon-delete", type: "danger",
          exec: this.handleDeleteVersion
        }
      ],
      sbomId: '',
      sbomVersionId: '',
      codeValue: [],
      codeData: [],
      imageValue: [],
      imageData: [],
      fsValue: [],
      fsData: [],
      checkedColumnNames: columnOptions.map((ele) => ele.props),
      columnNames: columnOptions,
      //名称搜索
      items: [
        {
          name: 'sbom.name',
          id: 'name'
        },
        {
          name: 'sbom.desc',
          id: 'description'
        },
        {
          name: 'account.creator',
          id: 'userName'
        },
      ],
      checkAll: true,
      isIndeterminate: false,
    }
  },
  watch: {
    '$route': 'init'
  },
  methods: {
    handleCheckedColumnNamesChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.columnNames.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.columnNames.length;
      this.checkedColumnNames = value;
    },
    handleCheckAllChange(val) {
      this.checkedColumnNames = val ? this.columnNames.map((ele) => ele.props) : [];
      this.isIndeterminate = false;
      this.checkAll = val;
    },
    select(selection) {
      this.selectIds.clear();
      selection.forEach(s => {
        this.selectIds.add(s.id)
      });
    },
    create() {
      this.addForm = {};
      this.createVisible = true;
    },
    createVersion() {
      this.addVersionForm = {};
      this.innerAddVersion = true;
    },
    //查询列表
    search() {
      let url = sbomListUrl + this.currentPage + "/" + this.pageSize;
      this.result = this.$post(url, this.condition, response => {
        let data = response.data;
        this.total = data.itemCount;
        this.tableData = data.listObject;
      });
    },
    handleEdit(tmp) {
      this.form = tmp;
      this.updateVisible = true;
    },
    handleVersionEdit(tmp) {
      this.editVersionForm = tmp;
      this.innerEditVersion = true;
    },
    handleClose() {
      this.createVisible =  false;
      this.updateVisible =  false;
      this.versionVisible = false;
    },
    handleDelete(obj) {
      this.$alert(this.$t('commons.delete_confirm') + obj.name + " ？", '', {
        confirmButtonText: this.$t('commons.confirm'),
        callback: (action) => {
          if (action === 'confirm') {
            this.result = this.$get(deleteSbomUrl + obj.id, () => {
              this.$success(this.$t('commons.delete_success'));
              this.search();
            });
          }
        }
      });
    },
    handleDeleteVersion(obj) {
      this.$alert(this.$t('commons.delete_confirm') + obj.name + " ？", '', {
        confirmButtonText: this.$t('commons.confirm'),
        callback: (action) => {
          if (action === 'confirm') {
            this.viewResult = this.$get(deleteSbomVersionUrl + obj.id, () => {
              this.$success(this.$t('commons.delete_success'));
              this.search();
            });
          }
        }
      });
    },
    init() {
      this.search();
    },
    sort(column) {
      _sort(column, this.condition);
      this.init();
    },
    filter(filters) {
      _filter(filters, this.condition);
      this.init();
    },
    //保存项目信息
    save(){
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          this.viewResult = this.$post(addSbomUrl, this.addForm, response => {
            if (response.success) {
              this.$success(this.$t('commons.create_success'));
              this.search();
              this.handleClose();
            } else {
              this.$error(response.message);
            }
          });
        }
      });
    },
    //编辑项目信息
    edit(){
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.viewResult = this.$post(updateSbomUrl, this.form, response => {
            if (response.success) {
              this.$success(this.$t('commons.update_success'));
              this.search();
              this.handleClose();
            } else {
              this.$error(response.message);
            }
          });
        }
      });
    },
    //保存项目版本信息
    saveVersion(){
      this.$refs['addVersionForm'].validate(valid => {
        if (valid) {
          this.addVersionForm.sbomId = this.sbomId;
          this.viewResult = this.$post(addSbomVersionUrl, this.addVersionForm, response => {
            if (response.success) {
              this.$success(this.$t('commons.create_success'));
              this.searchVersion();
              this.innerVersionClose();
            } else {
              this.$error(response.message);
            }
          });
        }
      });
    },
    //编辑项目版本信息
    editVersion(){
      this.$refs['editVersionForm'].validate(valid => {
        if (valid) {
          this.viewResult = this.$post(updateSbomVersionUrl, this.editVersionForm, response => {
            if (response.success) {
              this.$success(this.$t('commons.update_success'));
              this.searchVersion();
              this.innerVersionClose();
            } else {
              this.$error(response.message);
            }
          });
        }
      });
    },
    searchVersion() {
      let url = sbomVersionListUrl + this.versionPage + "/" + this.versionPageSize;
      let params = {sbomId: this.sbomId};
      this.viewResult = this.$post(url, params, response => {
        let data = response.data;
        this.versionTotal = data.itemCount;
        this.versionTableData = data.listObject;
      });
    },
    handleVersion(item) {
      this.sbomId = item.id;
      this.searchVersion();
      this.versionVisible = true;
    },
    handleScan(item) {
      this.$alert(this.$t('image.one_scan') + item.name + " ？", '', {
        confirmButtonText: this.$t('commons.confirm'),
        callback: (action) => {
          if (action === 'confirm') {
            this.viewResult = this.$get(sbomScanUrl + item.id,response => {
              if (response.success) {
                this.$success(this.$t('schedule.event_start') + this.$t('sbom.event_start'));
              } else {
                this.$error(response.message);
              }
            });
          }
        }
      });
    },
    innerVersionClose() {
      this.innerAddVersion = false;
      this.innerEditVersion = false;
      this.innerSettingVersion = false;
    },
    handleSetting(item) {
      this.sbomVersionId = item.id;
      this.viewResult = this.$get(codeUnBindListUrl,response => {
        this.codeData = [];
        for(let data of response.data) {
          this.codeData.push({
            key: data.id,
            label: data.name
          });
        }
      });
      this.viewResult = this.$get(imageUnBindListUrl,response => {
        this.imageData = [];
        for(let data of response.data) {
          this.imageData.push({
            key: data.id,
            label: data.name
          });
        }
      });
      this.viewResult = this.$get(fsUnBindListUrl,response => {
        this.fsData = [];
        for(let data of response.data) {
          this.fsData.push({
            key: data.id,
            label: data.name
          });
        }
      });
      this.viewResult = this.$get(codeAllBindListUrl + item.id,response => {
        this.codeValue = [];
        for(let data of response.data) {
          this.codeValue.push(data.id);
        }
      });
      this.viewResult = this.$get(imageAllBindListUrl + item.id,response => {
        this.imageValue = [];
        for(let data of response.data) {
          this.imageValue.push(data.id);
        }
      });
      this.viewResult = this.$get(fsAllBindListUrl + item.id,response => {
        this.fsValue = [];
        for(let data of response.data) {
          this.fsValue.push(data.id);
        }
      });
      this.innerSettingVersion = true;
    },
    settingVersion() {
      let params = {
        codeValue: this.codeValue,
        imageValue: this.imageValue,
        sbomId: this.sbomId,
        sbomVersionId: this.sbomVersionId,
      };
      this.viewResult = this.$post(settingVersionUrl, params,response => {
        this.$success(this.$t('organization.integration.successful_operation'));
        this.innerSettingVersion = false;
        this.searchVersion();
      });
    },
    filterMethod(query, item) {
      return item.label.indexOf(query) > -1;
    },
    deleteBatch() {
      if (this.selectIds.size === 0) {
        this.$warning(this.$t('commons.please_select') + this.$t('sbom.project'));
        return;
      }
      this.$alert(this.$t('oss.delete_batch') + this.$t('sbom.project') + " ？", '', {
        confirmButtonText: this.$t('commons.confirm'),
        callback: (action) => {
          if (action === 'confirm') {
            this.result = this.$request({
              method: 'POST',
              url: deleteProjectsUrl,
              data: Array.from(this.selectIds),
              headers: {
                'Content-Type': undefined
              }
            }, res => {
              this.$success(this.$t('commons.success'));
              this.search();
            });
          }
        }
      });
    },
  },
  activated() {
    this.init();
  }
}
</script>

<style scoped>
.table-content {
  width: 100%;
}

.el-table {
  cursor: pointer;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  padding: 10px 10%;
  width: 47%;
}

.rtl >>> .el-drawer__body {
  overflow-y: auto;
  padding: 20px;
}
.rtl >>> input {
  width: 100%;
}
.rtl >>> .el-select {
  width: 80%;
}
.rtl >>> .el-form-item__content {
  width: 75%;
}
/deep/ :focus{outline:0;}
.el-box-card {
  margin: 10px 0;
}
.sbom-icon{
  color: royalblue;
  font-size: 30px;
  vertical-align: middle;
}
.sbom-icon-2{
  color: red;
  font-size: 25px;
  vertical-align: middle;
}
.edit_dev >>> .el-transfer-panel {
  width:350px;
}
.edit_dev >>> .el-transfer-panel__list{
  padding-bottom: 50px;
}
</style>

